<template>
  <div>
     <van-form ref="form" @submit="onSubmit"  @failed="onfailed">
      <van-field
        v-model="obj.phone"
        name="phone"
        label="手机号码"
        placeholder="手机号码"
        clearable
         left-icon="phone"
        :rules="[
          { required: true, message: '请填写手机号码' },
          {
            pattern:reg.phone,
            message:'请输入正确的手机号码'
          }
        ]"
      />
      <van-field
        v-model="obj.captcha"
        name="captcha"
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        left-icon="qr"
        maxlength="4"
         :rules="[
          { required: true, message: '请填写短信验证码' },
          {
            pattern:/\d{4}/,
            message:'请输入长度为4的短信验证码'
          }
        ]"
      >
        <template #button>
          <van-button size="small" v-if="flag" type="primary" @click.stop="startSendCode"  >发送验证码</van-button>
           <van-button size="small" v-else type="info"  >{{count}} S</van-button>
        </template>
      </van-field>
      <div class="mt10">
        <van-button v-shuibowen block type="warning" native-type="submit">登录</van-button>
      </div>
     </van-form>
  </div>
</template>

<script>
export default {
  data(){
    return {
      obj:{

      },
      count:120,
      flag:true,
      timer:null,
    }
  },
  methods:{
    initTimeEnd(){
      this.flag = false;
      this.timer = setInterval(()=>{
        if(this.count>0){
          this.count--;
          this.flag = false;
        }else{
          this.flag = true;
          this.count = 120;
          clearInterval(this.timer)
          this.timer = null 
        }
      },1000)
    },  
    startSendCode(){
      
      if(this.reg.phone.test(this.obj.phone)){
        console.log("发送验证码")
        
        // 判断数据库是否有这个用户的phone 
        this.$http.finduser({
          phone:this.obj.phone
        }).then(res=>{
          if(res.length>0){
            this.initTimeEnd()
            this.$http.captcha_sent({
              phone:this.obj.phone
            })
            .then(res=>{
              this.$notify({type:"success",message:"发送成功"})
            })
          }else{
            this.showerror("当前手机号码未注册")
          }
        })
       
      }else{
        this.showerror("请先输入合法的手机号码")
      }
    },
    onSubmit(value){
        this.$http.captcha_verify(
          value
        )
        .then(res=>{
            if(res.code==200){
               this.$notify({type:"success",message:"登录成功"})
               localStorage.setItem("phone",value.phone);   // 判断是否登录
                var fromName = localStorage.fromName;
                if(fromName=='register' || fromName =='forgetpass'){
                  this.$router.push({name:'mine'})
                }else{
                  this.$router.go(-1);
                }
            }
        })
    },  
    onfailed(){
      this.showerror("请先输入有效的数据")
    }
  },
  mounted(){
    if(localStorage.phone){
      this.obj = {
        ...this.obj,
        phone:localStorage.phone
      }
    }
  },
  destroyed(){
      clearInterval(this.timer)
      this.timer = null
    }
}
</script>

